<template>
	<view class="friend-manager">
		<!-- 顶部导航栏 -->
		<u-navbar title="好友管理" back-text="返回" @leftClick="toBack" :title-size="38" :height="30" />

		<!-- 悬浮搜索和添加好友区域 -->
		<view class="sticky-bar">
			<view class="search-bar">
				<u-search placeholder="搜索好友昵称" v-model="keyword" @search="onSearch" />
			</view>
			<view class="add-friend" @click="goAddFriend">
				<u-icon name="plus" size="28" color="#2979ff" />
				<text style="margin-left: 10rpx;">添加好友</text>
			</view>
		</view>

		<!-- 留出空间防止被遮挡 -->
		<view style="height: 20rpx;"></view>

		<!-- 分组展示 -->

		<view v-for="(group, groupIndex) in filteredGroups" :key="groupIndex" class="friend-group">
			<view class="group-title">{{ group.name }}</view>

			<view class="friend-list">
				<view class="friend-item" v-for="(friend, index) in group.friends" :key="index">
					<u-avatar :src="friend.avatarUrl" size="large" />
					<view class="friend-info">
						<text class="nickname">{{ friend.nickname }}</text>
						<text class="signature">{{ friend.signature }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 空状态 -->
		<view style="height: 70vh">
			<u-empty v-if="!filteredGroups.length" mode="data" text="好友列表为空"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>

		<u-popup v-model="showAdd" mode="bottom" border-radius="14">
			<view style="padding: 20px;">
				<u-form :model="form" ref="uForm" :label-width="160">
					<u-form-item label="用户 ID:"><u-input v-model="form.friendId" /></u-form-item>
					<u-form-item label="用户分组:"><u-input v-model="form.label" /></u-form-item>
				</u-form>
				<view style="display: flex; justify-content: center; align-items: center;">
					<u-button type="success" style="margin-left: 20px;" @click="submit">提交信息</u-button>
				</view>
			</view>

		</u-popup>

	</view>
</template>

<script>
	import {
		getFriendList,
		addFriend
	} from '@/api/api.js'
	export default {
		data() {
			return {
				userInfo: {}, //用户信息
				keyword: '',
				groups: [],
				showAdd: false,
				form: {
					friendId: '',
					label: ''
				},
				showUserOk: false
			}
		},
		computed: {
			filteredGroups() {
				if (!this.keyword) return this.groups
				return this.groups.map(group => ({
					name: group.name,
					friends: group.friends.filter(f => f.nickname.includes(this.keyword))
				})).filter(g => g.friends.length > 0)
			}
		},
		mounted() {

			const that = this

			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					if (res && res.data) {

						that.userInfo = res.data

						that.getFriendList()

					} else {
						uni.showToast({
							title: '用户未登录，请登录后重试！',
							icon: 'none',
							duration: 1000 // 显示 2 秒
						});

						setTimeout(() => {
							uni.switchTab({
								url: '/pages/userInfo/userInfo'
							});
						}, 800); // 等待时间 = Toast显示时间
					}
				},
				fail: (err) => {
					uni.showToast({
						title: '用户未登录，请登录后重试！',
						icon: 'none',
						duration: 1000 // 显示 2 秒
					});

					setTimeout(() => {
						uni.switchTab({
							url: '/pages/userInfo/userInfo'
						});
					}, 800); // 等待时间 = Toast显示时间
				}
			})

		},
		methods: {
			submit() {
				/**
				 * 校验表单数据不能为空
				 */
				if (!this.form.friendId || this.form.friendId === '') {
					uni.showToast({
						title: '用户ID不能为空！',
						icon: "error",
						duration: 2000
					})
					return;
				}

				if (!this.form.label || this.form.label === '') {
					uni.showToast({
						title: '用户分组不能为空！',
						icon: "error",
						duration: 2000
					})
					return;
				}

				let param = {
					...this.form,
					userId: this.userInfo.userId
				}
				addFriend(param).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '添加成功！',
							icon: "success",
							duration: 2000
						})

						this.form = {
							friendId: '',
							label: ''
						}

						this.showAdd = false

						this.getFriendList()
					} else {
						uni.showToast({
							title: res.message,
							icon: "error",
							duration: 2000
						})
					}
				})

			},
			getFriendList() {
				console.log('getFriendList========')
				console.log(this.userInfo)
				let param = {
					userId: this.userInfo.userId
				}
				getFriendList(param).then(res => {
					if (res && res.data) {
						let friendList = []
						for (let i = 0; i < res.data.length; i++) {
							let data = {}
							let info = res.data[i]
							data.name = info.relationType
							data.friends = info.friends

							friendList.push(data)
						}
						this.groups = friendList
					}
				})

			},
			onSearch(val) {
				this.keyword = val
			},
			goAddFriend() {
				this.showAdd = true
			}
		}
	}
</script>

<style scoped>
	.friend-manager {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.search-bar {
		margin: 20rpx 30rpx;
	}

	.add-friend {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		color: #2979ff;
		font-size: 28rpx;
	}

	.friend-group {
		margin-top: 30rpx;
	}

	.group-title {
		padding: 20rpx 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.friend-list {
		padding: 0 30rpx;
	}

	.friend-item {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.friend-info {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.nickname {
		font-size: 28rpx;
		font-weight: bold;
	}

	.signature {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	/* 顶部悬浮 */
	.sticky-bar {
		position: sticky;
		top: 100rpx;
		/* 适配 u-navbar 高度 */
		z-index: 9;
		background-color: #fff;
		padding: 10rpx 30rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
	}
</style>